<template>
  <v-row class="ma-n2">
    <v-col v-for="(item, index) in items" :key="`creator-avatar-${index}`" class="v-col v-col-3">
      <CreatorAvatar :item="item" :radius="avatarRadius" @click:item="onItemClicked"></CreatorAvatar>
    </v-col>
    <v-col cols="12">
      <div v-intersect="onIntersect" class="text-center font-size-14 font-weight-500 line-height-140 mb-16">
        <div v-if="loading">{{ $t('common.loading') }}</div>
        <div v-else-if="noMore && items.length > 0">{{ $t('common.noMore') }}</div>
        <ErrorNodata v-else class="my-16"> </ErrorNodata>
      </div>
    </v-col>
  </v-row>
</template>
<script setup>
import { computed } from 'vue'
import { VCol, VRow } from 'vuetify/components'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import CreatorAvatar from '@/components/multimedia/CreatorAvatar.vue'

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  noMore: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['intersect', 'click:item'])

const onIntersect = (entry) => {
  if (entry === false) return
  if (props.loading) return
  emit('intersect')
}

const onItemClicked = (aff, username) => {
  emit('click:item', aff, username)
}

const { isMobile, windowWidth } = storeToRefs(useAppStore())
const avatarRadius = computed(() => (isMobile.value ? 35 * (windowWidth.value / 375) : 33))
</script>
